<template>
	<view>
		<view class="table-control tab2" ref="tabcontrol2" v-show="isShowTableControl">
			<view class="table-item" v-for="(item ,index) in tableTitle" 
						:key="index" 
						@click="tabClick(index)">
				<text :class="index === currentIndex ? 'active' : ''">{{item}}</text>
			</view>
		</view>
		<scroll-view id="home" >
			<swiper indicator-dots circular autoplay interval="3000" indicator-color="rgba(255,255,255,1)" indicator-active-color="red">
				<swiper-item v-for="(item, index) in swiper" :key="index">
					<image :src="item.image" mode=""></image>
				</swiper-item>
			</swiper>
			<view class="nav">
				<view class="nav-item" v-for="item in navRecommend" >
					<a :href="item.link">
						<image :src="item.image"></image>
						<view>{{item.title}}</view>
					</a>
				</view>
			</view>
		
			<!-- <view > -->
				<image  class="recommend" src="~@/static/home_recommend/recommend_bg.jpg" mode="widthFix"></image>
			<!-- </view> -->
			
			<view class="table-control" ref="tabcontrol" >
				<view class="table-item" v-for="(item ,index) in tableTitle" 
							:key="index" 
							@click="tabClick(index)">
					<text :class="index === currentIndex ? 'active' : ''">{{item}}</text>
				</view>
			</view>
		<!-- 	<view class="goods-wrapper">
				<view class="goods" v-for="item in goods">
					<image :src="item.show.img" mode=""></image>
					<view class="goods-info">
						<view class="info-title">{{item.title}}</view>
						<text class="price">{{item.price}}</text>
						<image src="~@/static/common/shoucang.svg" mode="widthFix"></image>
						<text class="collect">{{item.cfav}}</text>
					</view>
				</view>
			</view> -->
			<goods-list :goods="showGoods"></goods-list>
			
			
			<back-top v-show="isShowBackTop"  @click.native="goBackTop"></back-top>
		
		</scroll-view>
	</view>
	
</template>

<script>
	import GoodsList from '../../components/goodsList/GoodsList.vue'
	import BackTop from '../../components/backTop/BackTop'
	export default {
		components:{
			GoodsList,
			BackTop
		},
		data() {
			return {
				swiper: [],
				navRecommend: [],
				tableTitle: ['流行', '新款', '热销'],
				currentType: 'pop',
				goods: {
				  'pop': {page: 0,list: []},
				  'new': {page: 0,list: []},
				  'sell': {page: 0,list: []},
				},
				currentIndex:0,
				isShowBackTop: false,
				isShowTableControl: false
		      
			}
		},
		onLoad() {
			this.getSwiper()
			this.getGoods('pop')
			this.getGoods('new')
			this.getGoods('sell')
			console.log(this.$store)

		},
		onReachBottom() {
			console.log('触底了,加载更多数据')
			this.getGoods(this.currentType)
		},
		onPullDownRefresh() {
			console.log("下拉刷新")
			setTimeout(() => {
				uni.stopPullDownRefresh()
			},1000)
		},
		// 实时获取到滚动的值
		onPageScroll(Object) {
			// console.log(Object)
			if(Object.scrollTop >= 1000){
				this.isShowBackTop =true
			}else{
				this.isShowBackTop =false
			}
			
			this.isShowTableControl = Object.scrollTop >= this.$refs.tabcontrol.$el.offsetTop
			// console.log(this.isShowTableControl)
		},
		computed: {
		  showGoods(){
		    return this.goods[this.currentType].list
		  }
		},
		methods: {
			// 1.获取首页数据
			getSwiper(){
				this.$myRequest({
					url:"/home/multidata"
				}).then(res => {
					//获取轮播图的图片
					this.swiper = res.data.data.banner.list
					// console.log(this.swiper)
					// 获取推荐图片
					this.navRecommend = res.data.data.recommend.list
					// console.log(this.navRecommend)
				})
			},
			getGoods(type){
				const page = this.goods[type].page + 1
				this.$myRequest({
					url: "/home/data",
					data: {type, page}
				}).then(res => {
					this.goods[type].list.push(...res.data.data.list)
					this.goods[type].page += 1
					// console.log(this.goods)
				})
			},
			tabClick(index){
				this.currentIndex = index
				switch (index){
				  case 0 :
				    this.currentType = 'pop'
				    break
				  case 1:
				    this.currentType = 'new'
				    break
				  case 2:
				    this.currentType = 'sell'
				    break
				}
			},
			goBackTop(){
				uni.pageScrollTo({
					scrollTop:0,
					duration:500
				})
			}
	
		}
	}
</script>

<style lang="scss">
	#home{
		swiper{
			width: 750rpx;
			height: 390rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.nav{
			width: 750rpx;
			display: flex;
			text-align: center;
			font-size: 32rpx;
			padding-bottom: 20px ;
			border-bottom: 10px solid #eee;
			.nav-item{
				flex: 1;
				a{
					text-decoration: none;
					color: #666666;
					image{
						 margin: 10px  0;
						width: 166rpx;
						height: 166rpx;
					}
				}
			}
		}
		
		.recommend{
			width: 100%;
		}
	}
	
	.table-control{
		// position: relative;
		background-color: #fff;
		// left: 0;
		// top:-2px;
		// right: 0;
		// z-index: 9;
		display: flex;
		text-align: center;
		// background-color: #007AFF;
		// height: 48rpx;
		padding: 15px 0;
		color: #666666;
		font-size: 36rpx;
		.table-item{
			flex: 1;

			text{
				padding: 10rpx;
			}
		}
		
		.active{
			color: #f55777;
			border-bottom: 4rpx solid #f55777;
		}
	}
	.tab2{
		position: fixed ;
		top: 44px;
		left: 0;
		right: 0;
		z-index: 999;
	}
</style>
